<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar">
              <div class="m-b-16">
                <span class="text-info font-14 m-r-8">字段选择:</span>
                <el-checkbox v-model="searchModel.dayChecked"
                  @change="handleCheckChange($event, 'dayChecked')">日期</el-checkbox>
                <el-checkbox v-model="searchModel.settledChecked"
                  @change="handleCheckChange($event, 'settledChecked')">是否结算</el-checkbox>
                <el-checkbox v-model="searchModel.partnerIdChecked"
                  @change="handleCheckChange($event, 'partnerIdChecked')">合伙人编号</el-checkbox>
                <el-checkbox v-model="searchModel.userIdChecked"
                  @change="handleCheckChange($event, 'userIdChecked')">商户ID</el-checkbox>
                <el-checkbox v-model="searchModel.typeChecked"
                  @change="handleCheckChange($event, 'typeChecked')">下发类型</el-checkbox>

                <el-checkbox v-model="searchModel.commissionModeChecked"
                  @change="handleCheckChange($event, 'commissionModeChecked')">分成方式</el-checkbox>
                <el-checkbox v-model="searchModel.serviceRatioChecked"
                  @change="handleCheckChange($event, 'serviceRatioChecked')">商户费率</el-checkbox>
                <el-checkbox v-model="searchModel.benefitRatioChecked"
                  @change="handleCheckChange($event, 'benefitRatioChecked')">结算分成费率/比例</el-checkbox>
                <!-- <el-checkbox v-model="searchModel.settledTimeChecked"
                  @change="handleCheckChange($event, 'settledTimeChecked')">结算时间</el-checkbox> -->
              </div>
              <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">
                <el-form-item label="月份">
                  <el-date-picker v-model="searchModel.yearMonth" type="month" value-format="yyyy-MM"
                    placeholder="选择月份">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="日期" v-if="searchModel.dayChecked">
                  <el-date-picker v-model="searchModel.day" type="date" value-format='yyyy-MM-dd'>
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="合伙人编号" v-if="searchModel.partnerIdChecked">
                  <el-input v-model="searchModel.partnerId" placeholder="合伙人编号" />
                </el-form-item>

                <el-form-item label="商户ID" v-if="searchModel.userIdChecked">
                  <el-input v-model="searchModel.userId" placeholder="商户编号" />
                </el-form-item>


                <el-form-item label="下发类型" v-if="searchModel.typeChecked">
                  <el-radio-group @change="search(1)" v-model="searchModel.type">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="1">批量有密</el-radio-button>
                    <el-radio-button label="2">安全发</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="最低成功转账金额">
                  <div style="display:flex;">
                    <el-input v-model="searchModel.minSuccessAmount" placeholder="最低成功转账金额" />
                  </div>
                </el-form-item>


                <el-form-item class="operations">
                  <el-button type="success" 
                  v-permission="['ADMIN', 'partner-combination-settle-record::export']"
                  @click="exportSafePayTransStat">
                  导出</el-button>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table v-loading="loading" :data="list" size="small" style="width: 100%;">


              <el-table-column label="月份">
                <template slot-scope="scope">
                  {{ scope.row.year }}-{{ scope.row.month }}
                </template>
              </el-table-column>
              <el-table-column v-if="searchModel.dayChecked" prop="day" label="日期" />
              <el-table-column label="是否结算" v-if="searchModel.settledChecked">

                <template slot-scope="scope">
                  <div v-if="scope.row.settled" class="text-success">
                    是
                  </div>
                  <div v-else>
                    否
                  </div>
                </template>
              </el-table-column>

              <el-table-column v-if="searchModel.partnerIdChecked" prop="partnerId" label="合伙人编号" />
              <el-table-column v-if="searchModel.partnerIdChecked" prop="partnerName" label="合伙人姓名">
                <template slot-scope="scope">
                  {{ scope.row.partnerName ? scope.row.partnerName : '-' }}
                </template>
              </el-table-column>

              <el-table-column v-if="searchModel.partnerIdChecked" prop="twoLevelPartnerId" label="二级合伙人编号">
                <template slot-scope="scope">
                  {{ scope.row.twoLevelPartnerId ? scope.row.twoLevelPartnerId : "-" }}
                </template>
                </el-table-column>


              <el-table-column v-if="searchModel.userIdChecked" prop="userId" label="商户ID" />

              <el-table-column v-if="searchModel.typeChecked" label="下发类型">

                <template slot-scope="scope">
                  <div v-if="scope.row.type === 1">
                    批量有密
                  </div>
                  <div v-if="scope.row.type === 2">
                    安全发
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="分成方式" v-if="searchModel.commissionModeChecked">

                <template slot-scope="scope">
                  <div v-if="scope.row.commissionMode === 'fixed_mode'">
                    固定比例
                  </div>
                  <div v-if="scope.row.commissionMode === 'cost_mode'">
                    指定费率
                  </div>
                  <div v-if="scope.row.commissionMode === 'stat_mode'">
                    内部结算
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="商户费率" v-if="searchModel.serviceRatioChecked">

                <template slot-scope="scope">
                  <div>
                    <div>
                      到支付宝：<span>{{ (scope.row.serviceRatio * 100).toFixed(2) }}%</span>
                    </div>
                    <div>
                      到卡：<span>{{ (scope.row.bankServiceRatio * 100).toFixed(2)
                        }}%</span>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="结算分成费率/比例" v-if="searchModel.benefitRatioChecked">

                <template slot-scope="scope">
                  <div v-if="scope.row.twoLevelPartnerId != null">
                    <div>

                      <span v-if="scope.row.commissionMode === 'fixed_mode'">
                        <div>
                          <div class="text-danger">{{ (scope.row.benefitRatio * 100).toFixed(2) }}%毛利</div>
                          <div class="text-info">上级模式：上级比例</div>
                          <div class="text-primary">上级分佣比例：{{ (scope.row.twoLevelBenefitRatio * 100).toFixed(2) }}%</div>
                        </div>
                      </span>

                      <span v-if="scope.row.commissionMode === 'cost_mode'">
                        <div v-if="scope.row.twoLevelCommissionMode === 'fixed_mode'">
                          <div class="text-danger">
                            到户成本：<span>{{ (scope.row.costServiceRatio * 100).toFixed(2)
                              }}%</span>

                            <span class="m-l-8"> 到卡成本：</span><span>{{
                  (scope.row.bankCostServiceRatio * 100).toFixed(2) }}%</span>
                          </div>
                          <div class="text-info">上级模式：上级比例</div>
                          <div class="text-primary">上级分佣比例：{{ (scope.row.twoLevelBenefitRatio * 100).toFixed(2) }}%</div>
                        </div>
                        <div v-if="scope.row.twoLevelCommissionMode === 'cost_mode'">
                          <div class="text-danger">
                            到户成本：<span>{{ (scope.row.costServiceRatio * 100).toFixed(2)
                              }}%</span>

                            <span class="m-l-8"> 到卡成本：</span><span>{{
                  (scope.row.bankCostServiceRatio * 100).toFixed(2) }}%</span>
                          </div>
                          <div class="text-info">上级模式：指定上级费率</div>
                          <div class="text-primary">上级分佣费率：
                            到户<span> {{ (scope.row.twoLevelServiceRatio * 100).toFixed(2)
                              }}%</span>

                            <span class="m-l-8"> 到卡</span><span> {{
                  (scope.row.twoLevelBankServiceRatio * 100).toFixed(2) }}%</span>

                          </div>

                        </div>
                      </span>

                    </div>

                  </div>
                  <div v-if="scope.row.towLevelPartnerId == null">
                    <div v-if="scope.row.commissionMode === 'cost_mode'">
                      <div>
                        到支付宝：<span>{{ (scope.row.partnerServiceRatio * 100).toFixed(2) }}%</span>
                      </div>
                      <div>
                        到卡：<span>{{ (scope.row.partnerBankServiceRatio * 100).toFixed(2)
                          }}%</span>
                      </div>
                    </div>
                    <div v-else>{{ (scope.row.benefitRatio * 100).toFixed(2) }}%</div>

                  </div>

                </template>
              </el-table-column>

              <el-table-column label="结算成功转账金额">

                <template slot-scope="scope">
                  <div>
                    {{ scope.row.successAmount }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="结算成功转账笔数">

                <template slot-scope="scope">
                  <div>
                    {{ scope.row.successCount }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="合伙人收益">

                <template slot-scope="scope">
                  <div>
                    {{ scope.row.partnerSettleAmount }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column v-if="searchModel.settledTimeChecked" prop="settleTime" label="结算时间" >
                <template slot-scope="scope">
                  {{ scope.row.settleTime == null ? '-' : scope.row.settleTime }}
                </template>
              </el-table-column> -->
            </el-table>


            <div class="paging-wrap">
              <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize" :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </el-card>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { aggSearchPartnerCombinationSettleRecord } from '@/api/business'
const defaultModel = {
  dayChecked: true,
  partnerIdChecked: true,
  userIdChecked: true,
  typeChecked: true,

  commissionModeChecked: true,
  serviceRatioChecked: true,
  benefitRatioChecked: true,
  settledChecked: true,
  settledTimeChecked: true,

  type: "",
  userId: null,
  yearMonth: null,
  day: null,
  partnerId: null,
  minSuccessAmount: 1,
  pageNo: 1,
  pageSize: 10,
  count: 0
}
export default {
  components: {},
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      curData: null,
      opLoading: false,
      extra: "",
      checkBoxs: ['dayChecked', 'settledChecked', 'partnerIdChecked', 'userIdChecked', 'typeChecked', 'commissionModeChecked', 'serviceRatioChecked', 'benefitRatioChecked', 'settledTimeChecked']
    }
  },

  mounted() {
    // 判断路由中是否有daily参数，如果有代表从日账单跳转过来
    const param = this.$route.query.from
    if (param === 'daily') {
      this.searchModel.maxAmount = 0
      this.searchModel.minAmount = ''
    }
    this.init()
  },
  methods: {
    handleCheckChange(v1, v2) {
      //取消选择
      if (!v1) {
        let unCheckAfter = false;
        for (let value of this.checkBoxs) {
          if (unCheckAfter) {
            this.searchModel[value] = false
          }
          if (value === v2) {
            unCheckAfter = true
          }
        }

        //对应的搜索条件值清空
        if (v2 === 'dayChecked') {
          this.searchModel.day = null;
        } else if (v2 === 'partnerIdChecked') {
          this.searchModel.partnerId = null;
        } else if (v2 === 'userIdChecked') {
          this.searchModel.userId = null;
        } else if (v2 === 'typeChecked') {
          this.searchModel.type = "";
        }
      } else {
        //选择
        for (let value of this.checkBoxs) {
          if (value != v2) {
            this.searchModel[value] = true;
          } else {
            break;
          }
        }
      }
      this.search()
    },

    search() {
      this.getList(1)
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      aggSearchPartnerCombinationSettleRecord(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.count = data.count;
          self.list = data.data;
          self.extra = data.extra;
          self.loading = false;
        })
        .catch((err) => { });
    },


    // 导出
    exportSafePayTransStat() {
      var $temp = $("<form type='hidden'>"); //创建form标签
      $temp.attr("target", "_black");
      $temp.attr("method", "get");
      $temp.attr("action", "/api/admin/partner-combination-settle-record/export");
      var $input = $('<input type="hidden">');
      $input.attr("name", "searchModelJson");

      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);

      $input.attr("value", JSON.stringify(searchModel));
      $temp.append($input);
      $(document.body).append($temp);
      $temp.submit();
    },

    reset() {
      this.searchModel = _.cloneDeep(defaultModel)
      this.getList(1)
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1

      if (searchModel.yearMonth) {
        let yearMonth = searchModel.yearMonth.split("-");
        searchModel["year"] = yearMonth[0];
        searchModel["month"] = yearMonth[1];
      }


      delete searchModel.commissionModeChecked
      delete searchModel.serviceRatioChecked
      delete searchModel.benefitRatioChecked
      delete searchModel.settledTimeChecked

      delete searchModel.yearMonth;

      return searchModel
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val
      this.getList(1)
    },
    // 修改页面
    handleCurrentChange(val) {
      this.getList(val)
    },
    init() {
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.sumBox {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  padding: 0 2px;
  margin-bottom: 10px;
}

.sumItem {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-items: center;
  margin-right: 16px;
  height: 150px;
  padding: 16px;
  background-color: #fff;
  box-sizing: border-box;
  font-weight: 600;

  .sumdata {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
  }

}

.substationGroup {
  margin-bottom: 16px;

  .substationItem {
    margin-right: 20px;
  }
}
</style>
0